<template>
  <div class="login-container flex-tblr-center">
      <el-card class="login-card">
        <el-input class="mg-top-10" v-model="form.username" placeholder="用户名" clearable />
        <el-input class="mg-top-10"  v-model="form.password" type="password" placeholder="密码" show-password clearable />
        <div class="remember-me">
          <el-checkbox v-model="form.remember">记住密码</el-checkbox>
        </div>
        <div class="flex-tblr-col-center">
        <el-button type="primary" @click="logined" class="login-btn">登录</el-button>
        <el-button type="primary" plain @click="register" class="login-btn mg-top-10">注册</el-button>
        </div>
      </el-card>
  </div>
</template>

<script setup>
import { ref,inject } from "vue";

import { useRouter } from "vue-router";
console.log(import.meta.env.API_URL);

const router = useRouter();
const http = inject("http");
const logined = async () => {
  console.log("登录信息：", form.value);
  console.log(await http.get("https://jsonplaceholder.typicode.com/posts"));
  console.log(inject("http"));
  router.push("/chat"); // 跳转到 /about
};
const form = ref({
  username: "",
  password: "",
  remember: false,
});

const register = () => {
  console.log("跳转到注册页");
};
</script>

<style scoped>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
.login-container {
  height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;
  overflow: hidden;
}
.login-card {
  width: 320px;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
}
.remember-me {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-btn{
    width: 100%;
    margin-left: 0;
}
</style>